<!--
 * @Description: 公司质量参数审批
 * @Author: wangwangwang
 * @Date: 2020-11-18 15:34:16
 * @LastEditors: Please set LastEditors
 * @LastEditTime: 2021-12-30 15:39:56
-->
<template>
  <div class="flows-content">
    <el-container>
      <el-main style="padding: 0;">
        <el-container direction="vertical">
          <FlowHeader :isReadOnly="readOnly" @saveSubmit="handleSubmit(1)" @sendSubmit="handleSubmit(2)" @handleBackEnd="handleSubmit(3)" @handleCC="handleSubmit(4)" @handleAssign="handleSubmit(5)" @handleBackUp="handleSubmit(6)" @handleAssist="handleSubmit(7)" @handleNode="handleSubmit(8)" @handleNodeImage="handleSubmit(9)" @handleCollection="handleSubmit(10)" />
          <el-main class="info">
            <div>
              <el-input v-model="title" class="flow-title" :disabled="$route.query.type*1!==1" placeholder="请输入流程标题"></el-input>
            </div>
            <div class="info-top">
              <div class="left">
                <span>单据号码：{{billCode}}</span>
                <span class="text">制单日期：{{billDate}}</span>
              </div>
              <div class="right">
                <span>发起人：{{applyPerson}}</span>
                <span class="text">状态：{{taskTypeText[taskStatus*1]}}</span>
              </div>
            </div>
            <div>
              <div style="padding:20px 0">
                <span>公司：</span><span>{{company}}</span>
                <span style="padding-left:100px">物料：</span><span>{{name}}</span>
                <span style="padding-left:100px">规格：</span><span>{{specification}}</span>
              </div>
                <div style="position: relative">
                    <div class="params_template">
                        <div class="wrap"></div>
                        <Template1 v-if="templateIndex === '1'" ref="template1" :templateData="templateData"/>
                        <Template2 v-if="templateIndex === '2'" ref="template2" :templateData="templateData"/>
                        <Template3 v-if="templateIndex === '3'" ref="template3" :templateData="templateData"/>
                        <Template4 v-if="templateIndex === '4'" ref="template4" :templateData="templateData"/>
                        <Template5 v-if="templateIndex === '5'" ref="template5" :templateData="templateData"/>
                        <Template6 v-if="templateIndex === '6'" ref="template6" :templateData="templateData"/>
                        <Template7 v-if="templateIndex === '7'" ref="template7" :templateData="templateData"/>
                        <Template8 v-if="templateIndex === '8'" ref="template8" :templateData="templateData"/>
                        <Template9 v-if="templateIndex === '9'" ref="template9" :templateData="templateData"/>
                        <Template10 v-if="templateIndex === '10'" ref="template10" :templateData="templateData"/>
                    </div>
                </div>

            </div>
            <div class="flows-details">
              <FlowContent ref="flowcontent" :title='title' :showSendVisible="showSendVisible" @handleCancel="handleCancel" @sendCode="sendCode" @handleFinish="handleFinish" @handleBusiness="handleBusiness" />
            </div>
          </el-main>
        </el-container>
      </el-main>
    </el-container>
  </div>
</template>
<script>
import FlowContent from '@/components/WorkFlow/flowContent';
import FlowHeader from '@/components/WorkFlow/flowHeader';
import { getUserInfo } from "@/utils/auth.js";
import Template1 from '../components/Raw/QualityTemplate/Template1'
import Template2 from '../components/Raw/QualityTemplate/Template2'
import Template3 from '../components/Raw/QualityTemplate/Template3'
import Template4 from '../components/Raw/QualityTemplate/Template4'
import Template5 from '../components/Raw/QualityTemplate/Template5'
import Template6 from '../components/Raw/QualityTemplate/Template6'
import Template7 from '../components/Raw/QualityTemplate/Template7'
import Template8 from '../components/Raw/QualityTemplate/Template8'
import Template9 from '../components/Raw/QualityTemplate/Template9'
import Template10 from '../components/Raw/QualityTemplate/Template10'
export default {
  components: {
    FlowContent,
    FlowHeader,
    Template1,
    Template2,
    Template3,
    Template4,
    Template5,
    Template6,
    Template7,
    Template8,
    Template9,
    Template10,
  },
  data() {
    return {
      type: 0,
      title: '公司质量参数审批',
      billCode: '',
      billDate: '',
      applyPerson: '',
      taskTypeText: ['发起', '已保存', '审批中', '已完成', '撤销', '不通过'],
      taskStatus: 0,
      showSendVisible: false,
      titlestatus: null,
      company: '',
      specification: '',
      name: '',
      readOnly: false,
      templateIndex: '',
      templateData: {}
    }
  },
  methods: {
    handleBusiness() {
      const params = {
        process_success: {
          url: '/icps/system/sign/basics/qualityDetection/saveNormByDetection',
          data: [],
          httpMethod: 'post',
        },
        process_failure: ''
      }
      this.showSendVisible = false;
      this.$refs.flowcontent.handleToFlow(params);
    },
    handleFinish() {
    },
    handleSubmit(type) {
      const { query } = this.$route;
      if (query.type * 1 === 2 && type === 2 && query.taskType * 1 !== 2) { // 发起流程
        this.showSendVisible = true;
        return
      }
      const data = {
        dataSource: 'sign_CPYquality',
        dataContent: JSON.stringify(this.$route.query), // 业务数据
      }
      this.$refs.flowcontent.saveFlows(type, data);
    },
    handleFlowChat() {
      this.$refs.flowcontent.showFlowNode()
    },
    handleCancel() {
      this.showSendVisible = false;
    },
    sendCode(code) {
      this.billCode = code;
    },
  },
  created() {
    const { query } = this.$route;
    this.titlestatus = Number(query.type)
  },
  async mounted() {
    const { query } = this.$route;
    if (query.type * 1 === 1) { // 发起流程
      this.$refs.flowcontent.initBaseData('sign_CPYquality');
      this.billDate = new Date().Format('yyyy-MM-dd hh:mm:ss');
      this.applyPerson = await getUserInfo().userRealName;
      this.company = query.company
      this.specification = query.specification
      this.name = query.name
      this.templateIndex = query.templateIndex;
      this.templateData = JSON.parse(query.templateData);
      return
    }
    const dataContent = JSON.parse(query.dataContent);
    this.company = dataContent.company
    this.specification = dataContent.specification
    this.name = dataContent.name
    this.templateIndex = dataContent.templateIndex;
    this.templateData = JSON.parse(dataContent.templateData);

    this.title = query.taskName;
    this.billCode = query.receiptNumber;
    this.applyPerson = query.createUserName;
    this.billDate = query.createTime;
    this.taskStatus = query.taskStatus;
    if (query.isReadOnly*1===1) {
      this.readOnly = true;
    }
  }
}
</script>
<style lang="scss" scoped>
$td_width: 100px;
$td_height: 36px;
.bill_title {
  font-size: 18px;
  font-weight: 600;
  padding: 15px 0;
}
.bill_title1 {
  font-size: 18px;
  font-weight: 600;
  padding: 20px 0;
}
.bill_subtitle {
  padding: 20px 0;
  > span {
    padding-right: 20px;
  }
  .text {
    color: #000;
  }
}
.combined {
  border: 1px solid #ebeef5;
  text-align: center;
  line-height: 40px;
}
.flows-details {
  margin-top: 20px;
}
.info {
  padding: 0 20px;
  background: #fff;
  width: 100%;
  .info-top {
    font-size: $font_size;
    color: #000000;
    @include discen_al;
    justify-content: space-between;
    height: 50px;
    border-bottom: 1px #e1e5ed solid;
    .left {
      @include discen_al;
    }
    .text {
      margin-left: 60px;
    }
  }
}
.nav_title {
  @include discen_al;
  align-items: flex-end;
  > div {
    width: 4px;
    height: 24px;
    background: $bg_color;
    margin-right: 10px;
  }
  i {
    margin-left: 5px;
  }
  color: $bg_color;
  font-size: 20px;
  font-weight: bold;
}
.dialoginfo {
  padding: 0;
}
.active {
  border-top: 1px #e1e5ed solid;
  border-right: 1px #e1e5ed solid;
  border-left: 1px #e1e5ed solid;
  background: #fff;
}
.dialoginfo-info {
  border-right: 1px #e1e5ed solid;
  border-left: 1px #e1e5ed solid;
  border-bottom: 1px #e1e5ed solid;
}
/*弹窗*/
.dialoginfo-title {
  > div {
    cursor: pointer;
  }
  height: 48px;
  display: flex;
  background: linear-gradient(
    180deg,
    rgba(250, 252, 255, 1) 0%,
    rgba(245, 247, 250, 1) 100%
  );
  .none {
    font-weight: bold;
    height: 48px;
    @include discen;
    width: calc(calc(100% - 1px) / 2);
    border-bottom: 1px solid #e1e5ed;
    > div {
      line-height: 48px;
      border-bottom: 1px rgba(0, 0, 0, 0) solid;
    }
  }
  .center {
    width: 1px;
    height: 48px;
    background: #e1e5ed;
  }
  .active {
    font-weight: bold;
    height: 48px;
    @include discen;
    width: calc(calc(100% - 1px) / 2);
    border-bottom: 1px solid rgba(0, 0, 0, 0);
    > div {
      color: $bg_color;
      line-height: 48px;
      border-bottom: 1px $bg_color solid;
    }
  }
}
.dialoginfo-info {
  padding: 10px 20px;
  overflow: auto;
  height: calc(85vh - 282px);
  .el-select,
  .el-input,
  .el-date-picker {
    width: 100%;
  }
}
.form-title {
  font-size: 18px;
  margin: 10px 0;
  display: flex;
  justify-content: space-between;
}

.wrap {
        width: 100%;
        height: 100%;
        position: absolute;
        left: 0;
        top: 0;
        z-index: 1;
    }
</style>